<template>  
  <div id="app">  
    <app-header :titleShow="true" :qrShow="false"></app-header>
    <template v-for="item in order">
      <list :data="item"  :account="account" :canClose="false"></list>  
    </template>
    <fields :offeredOrderId="true" :account="account"></fields>    
  </div>
</template>

<script>
  import AppHeader from './components/header.vue'
  import Fields from './components/fields.vue'  
  import List from './components/list.vue'
  import c from './configs'
  import request from 'superagent'
  import sweetalert from 'sweetalert'

  export default {
    components: { AppHeader, Fields, List },
    name: 'app',
    data: function() {
      return {
        titleShow: false,
        qrShow: false,
        isOrderOffered: true,
        secretId: 'xxxxxx',
        name: 'name',
        account: 'xxxxxxxx',
        headProtraitFileId: 'xxxxxxxx',
        order: []
      }
    },
    mounted: function() {
      var self = this      
      var secretId = window.location.href.match(/(loginQrcode\/)(.*)$/) &&
                       window.location.href.match(/(loginQrcode\/)(.*)$/)[2]

      request      
        .get(c.ctx + '/wechat/user/loginQrcodeUrl/' + (secretId || self.secretId))
        .end(function(err, res) {
          if (err || !res.ok) {
            
          } else {
            self.name = res.body.data.name
            self.account = res.body.data.loginName
            self.headPortraitFileId = res.body.data.headPortraitFileId
            self.order = res.body.data.order
          }
        })
    }
  }
</script>

<style lang="less">
  @gradientStart: #acbefe;
  @gradientEnd: #6fcdff;
  @import "./styles/reset.less";
  @import "./styles/basic.less";  
  #app {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradientStart), to(@gradientEnd));
    background-color: #eee;
    padding: 12px 6px 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    .head {
      height: 32px;
    }
    .orderslist {
      margin: 0 auto;      
      .list {
        box-shadow: 0px 0px 8px #ccc;
      }      
    }
    .fields {
      margin-top: 16px;
      .field {
        width: 100%;
        margin-bottom: 18px;
      }
    }    
  }
</style>